<template>
  <div class="right-container">
    <!-- getters的使用 -->
    <!-- <h3>Right 组件 ---- 是否全选: {{isAll}}</h3> -->
     <!-- getters 就是计算属性, 所以不需要加括号调用 -->
    <!-- <h3>Right 组件 ---- 是否全选:{{$store.getters.isAll}}</h3> -->
    <h3>Right 组件 ---- 是否全选:{{isAll}}</h3>
    <hr>
        <!-- 完整书写 -->
    <!-- <p>count 值：{{this.$store.state.count}}</p> -->
    <!-- 在 template 中可以省略 this.  直接使用$store   在script中就必须使用this -->
    <p>count 值：{{count}}</p>
    <button  @click="add({num:-5})" class="btn btn-warning">-1</button>
    <!-- actions调用传参 -->
    <!-- <button  @click="$store.dispatch('subAsync',{num:-7})" class="btn btn-warning">异步-5</button> -->
    <!-- actions辅助用法 -->
    <button  @click="subAsync ({num:-10})" class="btn btn-warning">异步-5</button>
  </div>
</template>

<script>
// 辅助函数小结
// 1. mapState 用于键个 Vuex 中 state 的数据映射到当前组件, 结合计算属性 computed 使用
// 2. mapMutations 用于将 Vuex 中 mutations 的函数映射到当前组件,结合 methods 使用
// 3. mapActions 用于将 Vuex 中 actions 的函数映射到当前组件,结合methods 使用
// 4. mapGetters 用于将 Vuex 中 getters 的函数映射到当前组件,结合 computed 使用

// 1.按需导入 mapActions, mapMutations, mapState,mapGetters
import {mapActions, mapMutations, mapState,mapGetters} from 'vuex'
export default {
  name: 'Right', 
  computed:{
    ...mapState(['count','name']),
    // isAll(){
    //       return this.$store.list.every(item => item.isDone)
    // }
    ...mapGetters(['isAll'])
  },
  methods:{
    // 2.在methods 中调用 mapMutations 传入要映射的 mutation 函数,将结果调用...扩展运算符展开
    // mapMutations后 ,可以在当前组件中访问到add 函数
    ...mapMutations(['add']),
    // btn(){
    //   this.$store.commit('add',{num:-1})
    //   this.add({num-1})
    // }
    ...mapActions(['subAsync']),
  }
   
}
</script>

<style>
</style>
